var loose = document.querySelector(".loose")
var oneg = document.querySelectorAll(".oneg")
var wrap = document.querySelector(".wrap")
var wrap1 = document.querySelector(".wrap-a")
var wrap2 = document.querySelector(".wrap-b")
var wrap3 = document.querySelector(".wrap-c")
var arr = [wrap,wrap1,wrap2,wrap3];




loose.style.top="0px"
//侧边栏点击效果
var oneg_yuan = document.querySelectorAll(".oneg>.yuan")
var oneg_i = document.querySelectorAll(".oneg>.yuan>i")
var oneg_span = document.querySelectorAll(".oneg>span")




for(let i = 0;i<oneg.length;i++){
	oneg[i].onclick=function(){
		for(let k=0; k<oneg.length; k++){
			oneg[k].style.borderColor='#fff'
			oneg_yuan[k].style.borderColor='#fff'
			oneg_i[k].style.color='#fff'
			oneg_span[k].style.color='#fff'
		}
			oneg[i].style.borderColor='#369BBE'
			oneg_yuan[i].style.borderColor='#369BBE'
			oneg_i[i].style.color='#369BBE'
			oneg_span[i].style.color='#369BBE'
		loose.style.top=-(arr[i].offsetTop)+"px"
	}
}



//	nav
effect = 0
var swiper = new Swiper('.swiper-container', {
	loop: true,
	speed: 2500,
	slidesPerView: 3,
	spaceBetween: 30,
	centeredSlides: true,
	watchSlidesProgress: true,
	on: {
		setTranslate: function() {
			slides = this.slides
			for(i = 0; i < slides.length; i++) {
				slide = slides.eq(i)
				progress = slides[i].progress
				//slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
				slide.css({
					'opacity': '',
					'background': ''
				});
				slide.transform(''); //清除样式

				if(effect == 1) {
					slide.transform('scale(' + (1 - Math.abs(progress) / 8) + ')');
				} else if(effect == 2) {
					slide.css('opacity', (1 - Math.abs(progress) / 6));
					slide.transform('translate3d(0,' + Math.abs(progress) * 20 + 'px, 0)');
				} else if(effect == 3) {
					slide.transform('rotate(' + progress * 30 + 'deg)');
				} else if(effect == 4) {
					slide.css('background', 'rgba(' + (255 - Math.abs(progress) * 20) + ',' + (127 + progress * 32) + ',' + Math.abs(progress) * 64 + ')');
				}

			}
		},
		setTransition: function(transition) {
			for(var i = 0; i < this.slides.length; i++) {
				var slide = this.slides.eq(i)
				slide.transition(transition);
			}
		},
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
});

pe = document.getElementById('progressEffect');
pe.onchange = function() {
	effect = this.value
	swiper.update();
}


